<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-23 11:09:14
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-05-23 14:13:53
 * @FilePath: \nien-vue3-admin\src\views\finance\payableManage\billsPayable\bookingFee\components\DetailDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="dialog-bookingFee">
    <el-dialog
      v-model="visible"
      title="详情" 
    >
      <custom-container ref="customContainerRef" :config="config" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { getSummaries } from '@/utils'

const visible = ref<boolean>(false)

const config = computed({
  get() {
    return {
      query: {
        fields: [],
        queryParams: {
          pageSize: 10,
          pageNum: 1,
          customerCode: undefined,
          identificationNo: undefined,
        },
        formOption: {
          labelWidth: 100,
        },
      },
      btns: [
        {
          title: '审核',
          type: 'danger',
          onClick(e) {
          },
        },
        {
          title: '反审核',
          type: 'danger',
          onClick(e) {
          },
        },
        {
          title: '导出',
          type: 'primary',
          onClick: (e) => {
          },
        },
      ],
      table: {
        columns: [
          { type: 'selection', align: 'center', width: '100' },
          { label: '提单号', align: 'center', prop: 'ladingNo' },
          { label: '费用类型', align: 'center', prop: 'identificationNo' },
          { label: '费用明细', align: 'center', prop: 'remarks' },
          { label: '费用金额', align: 'center', prop: 'jine' },
          { label: '币种', align: 'center', prop: 'remarks' },
          { label: '账单状态', align: 'center', prop: 'remarks' },
          { label: '创建人', align: 'center', prop: 'remarks' },
          { label: '创建时间', align: 'center', prop: 'remarks' },
          { label: '付款时间', align: 'center', prop: 'remarks' },
          { label: '类型', align: 'center', prop: 'remarks' },
        ],
        event: {
          showSummary: true,
          summaryMethod: getSummaries([
            { column: 'jine', valueFormatter: (sum) => (`￥${ sum }`) }, 
          ], 
          '金额总价'),
        },
      },
      api: () => Promise.resolve({ code: 200, data: [{ jine: 10 }, { jine: 2 }] }),
    }
  },
  set(val) {
    return val
  },
})

const open = () => {
  visible.value = true
}

defineExpose({
  open,
})
</script>

<style lang="less" scoped>
.dialog-bookingFee {
  ::v-deep .el-overlay .el-dialog__body{
    padding: 0;
  }
}
</style>